<template>
	<view class="evalList">
		<navBar isBack backColor="#333" title="客户评价" background="#fff" color="#333"></navBar>
		<view class="list">
			<view class="listItem" v-for="(item,index) in evalList" :key="index">
				<view class="itemLeft">
					<image :src="item.user_id.avatar.path" mode=""></image>
				</view>
				<view class="itemRight">
					<view class="userName">{{item.user_id.username}}<span>2021-2-26</span></view>
					<!-- <u-rate size="26" active-color="#FFD425" gutter="3" disabled  current="5"></u-rate> -->
					<view class="cont">{{item.content}}</view>
					<view class="evalImg">
						<image  @tap='previewImage(item.thumb_url,indexs)' :src="items.path" mode="" v-for="(items,indexs) in item.thumb_url" :key="indexs"></image>
					</view>
					<!-- <view class="evalImg" v-else-if="!Array.isArray(item.thumb_url) && item.thumb_url">
						<image :src="item.thumb_url.path" mode=""></image>
					</view> -->
					<!-- 店家回复 -->
					<!-- <view class="reply">
						<span>店家回复</span>感谢亲对我们房子的认可！我们把楼房的品质作为我们一直以来的追求，您的支持与认可一定会让我们走的更远！
					</view> -->
				</view>
			</view>
		</view>
		
		<!-- 发表评论 -->
		<view class="btnBox">
			<button class="btn" @click="toEvalPublish">
				<u-icon name="edit-pen-fill"></u-icon>
				发表点评
			</button>
		</view>
	</view>
</template>

<script>
	import navBar from '@/components/navBar/navBar.vue';
	import service_oneN from '@/service/oneN.js'
	export default{
		components:{
			navBar
		},
		data(){
			return{
				baseImg:'http://manager.ryz1620.com',
				evalList:[],
				estate_id:null,
				page:1,
				pagesize:10
			}
		},
		onLoad(options) {
			this.$utils.getUrl()
			this.estate_id = options.estate_id;
			this.getEvalList()
		},
		onShow() {
			this.getEvalList()
		},
		onReachBottom() {
			this.page++;
			uni.showLoading({
				title:'加载中...'
			})
			let params = {
				estate_id:this.estate_id,
				page:this.page,
				pagesize:this.pagesize
			}
			service_oneN.getEvalList(params).then(res=>{
				console.log(res)
				if(res.code==1){
					if(!res.data.length){
						uni.showToast({
							title:'没有更多了~',
							icon:'none'
						})
						return
					}
					this.evalList = this.evalList.concat(res.data)
				}
			})
			setTimeout(function(){
				uni.hideLoading()
			},500)
		},
		methods:{
			getEvalList(){
				this.page = 1
				let params = {
					estate_id:this.estate_id,
					page:this.page,
					pagesize:this.pagesize
				}
				service_oneN.getEvalList(params).then(res=>{
					console.log(res,'评价列表2')
					if(res.code==1){
						this.evalList = res.data?res.data:[]
					}
				})
			},
			previewImage(list, index) {
				// console.log(list);
				// console.log(index);
				let imgUrl = []
				list.map(item => {
					imgUrl.push(item.path)
				})
				uni.previewImage({
					current: index, //预览图片的下标
					urls: imgUrl //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				});
			},
			// 进入发表评论
			toEvalPublish(){
				uni.navigateTo({
					url:'./evalPublish?estate_id='+this.estate_id
				})
			}
		}
	}
</script>

<style lang="scss">
	page{height: 100%;}
	.evalList{
		width: 100%;
		height: 100%;
		background-color: #fff;
		.list{
			background-color: #fff;
			margin-bottom: 108rpx;
			padding: 0rpx 32rpx;
			padding-bottom: constant(safe-area-inset-bottom);///兼容 IOS<11.2/
			padding-bottom: env(safe-area-inset-bottom);///兼容 IOS>11.2/
			.listItem{
				display: flex;
				padding: 40rpx 0;
				border-bottom: 2rpx solid #F4F4F4;
				.itemLeft{
					width: 84rpx;
					height: 84rpx;
					border-radius: 50%;
					image{width: 84rpx;height: 84rpx;border-radius: 50%;}
				}
				.itemRight{
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					font: 600 28rpx/48rpx PingFang SC;
					flex: 1;
					.userName{display: flex;justify-content: space-between;flex: 1;}
					p,span{font: 400 24rpx/44rpx PingFang SC;color: #939393;}
					.cont{font: 400 28rpx/48rpx PingFang SC;color: #333;}
					.evalImg{
						margin: 28rpx 0 0 0;
						display: flex;
						// justify-content: space-between;
						flex-direction: row;
						flex-wrap: wrap;
						image{margin-right: 7rpx;margin-bottom:7rpx ;width: 188rpx;height: 188rpx;border-radius: 4rpx;}
					}
					// 店家回复
					.reply{
						margin-top: 28rpx;
						padding: 20rpx;
						width: 584rpx;
						height: 144rpx;
						background-color: #F6F7FB;
						border-radius: 8rpx;
						font: 400 22rpx/36rpx PingFangSC-Regular;
						color: #505050;
						span{font-family: PingFangSC-Medium;margin-right: 10rpx;}
					}
				}
			}
		}
		// 发表评论
		.btnBox{
			width: 100%;
			height: 108rpx;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			height: calc(108rpx+ constant(safe-area-inset-bottom));///兼容 IOS<11.2/
			height: calc(108rpx + env(safe-area-inset-bottom));///兼容 IOS>11.2/
			padding-bottom: constant(safe-area-inset-bottom);///兼容 IOS<11.2/
			padding-bottom: env(safe-area-inset-bottom);///兼容 IOS>11.2/
			.btn{
				u-icon{
					margin-right: 16rpx;
				}
				margin: 10rpx auto ;
				width: 520rpx;
				height: 88rpx;
				background-color: #C3AB7C;
				border-radius: 44rpx;
				font: 600 32rpx/88rpx PingFang SC;
				color: #fff;
				display: flex;
				justify-content: center;
			}
		}
	}
</style>
